<!-- BEGIN:main -->
<script type="text/javascript">

    $(document).ready(function() {		
	
        //Execute the slideShow
        slideShowTravel();

    });

    function slideShowTravel() {

        //Set the opacity of all images to 0
        $('#gallery_travel a').css({opacity: 0.0});
	
        //Get the first image and display it (set it to full opacity)
        $('#gallery_travel a:first').css({opacity: 1.0});
	
        //Set the caption background to semi-transparent
        $('#gallery_travel .caption').css({opacity: 0.7});

        //Resize the width of the caption according to the image width
        $('#gallery_travel .caption').css({width: $('#gallery_travel a').find('img').css('width')});
	
        
        //Get the caption of the first image from REL attribute and display it
        $('#gallery_travel .content').html($('#gallery_travel a:first').find('img').attr('rel'))
        .animate({opacity: 0.7}, 400);
        
	
        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
        setInterval('gallery_travel()',5000);
	
    }

    function gallery_travel() {
	
        //if no IMGs have the show class, grab the first image
        var current = ($('#gallery_travel a.show')?  $('#gallery_travel a.show') : $('#gallery_travel a:first'));

        //Get next image, if it reached the end of the slideshow, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery_travel a:first') :current.next()) : $('#gallery_travel a:first'));	
	
        //Get next image caption
        var caption = next.find('img').attr('rel');	
	
        //Set the fade in effect for the next image, show class has higher z-index
        next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);

        //Hide the current image
        current.animate({opacity: 0.0}, 1000)
        .removeClass('show');
	
        //Set the opacity to 0 and height to 1px
        $('#gallery_travel .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
	
        //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
        $('#gallery_travel .caption').animate({opacity: 0.7},100 ).animate({height: '30px'},500 );
	
        //Display the content
        $('#gallery_travel .content').html(caption);
		
    }

</script>

<style type="text/css">
    body{
        font-family:arial
    }

    .clear {
        clear:both
    }

    #gallery_travel {
        position:relative;
        height:220px;
        width: 220px;
        border: none;
        text-align: left;
        /*border:1px solid red;*/
    }

    #gallery_travel a {
        float:left;
        position:absolute;
    }

    #gallery_travel a img {
        border:none;
        height: 216px;
        width: 216px;
        position:absolute;
        left: 1px;
        top: 1px;
        bottom: 1px;
    }

    #gallery_travel a.show {
        z-index:2;
        border:none;
    }

    #gallery_travel .caption {
        z-index:4; 
        background-color:#000; 
        color:#ffffff; 
        height:30px; 
        width:100%; 
        position:absolute;
        bottom:0;
    }

    #gallery_travel .caption .content {
        margin:5px;
        font-size: 12px;
    }
</style>


<div class="d_block d_border_radius5">

    <div class="d_content_block">  
        <!-- class album giúp tạo hiệu ứng click vào ảnh sẽ phóng to -->
        <div class="album">
            <!-- id gallery_travel giúp tạo hiệu ứng fade ảnh -->

                <!-- BEGIN:LIST -->

                <a href="{IMAGE_FILE}" class="{CLASS}">
                    <img class="d_border_radius3" style="width: 260px" src="{IMAGE_FILE}" alt="{IMAGE_TITLE}" title="" alt="" rel="{IMAGE_TITLE}"/>
                </a>  
                <div class="d_divide5"></div>

                <!-- END:LIST -->

                <!--<div class="caption"><div class="content"></div></div>-->
            
        </div>
    </div>
</div>

<!-- END:main -->